<template>
  <div>
    <h1 class="title">欢迎登陆美团</h1>
    <div class="shoujihao">
      +86
      <input
        @input="sjh"
        v-model="value"
        type="text"
        placeholder="请输入手机号"
      />
    </div>
    <div class="mima1">
      <input
        @input="mimapan"
        v-model="value1"
        type="password"
        placeholder="请输入密码"
      />
    </div>
    <div class="buhege" v-if="bool">您输入的不合格</div>
    <div class="denglu">
      <input type="checkbox" @click="add" />您要是想登录美团就必须点击我
    </div>
    <div>
      <button class="zdenglu" @click="denglu">登录</button>
    </div>
    {{ checked }}{{ mima }}{{ zhanghao }}
  </div>
</template>
<style scoped>
.buhege {
  width: 100%;
  height: 6.4rem;
  color: #000;
  text-align: center;
  line-height: 2rem;
  background: #fff;
  position: fixed;
  top: 6%;
  left: 0;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
.title {
  font-size: 0.48rem;
  font-weight: 400;
}
.shoujihao {
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  border-bottom: 1px solid #000;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.shoujihao input {
  border: none;
  color: #000;
  font-size: 0.3rem;
  width: 6rem;
  height: 1rem;
  outline: none;
  margin-left: 0.2rem;
}
.mima1 {
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  border-bottom: 1px solid #000;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.mima1 input {
  border: none;
  color: #000;
  font-size: 0.3rem;
  width: 6rem;
  height: 1rem;
  outline: none;
  margin-left: 0.2rem;
}
.denglu {
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.denglu input {
  margin-right: 0.1rem;
  vertical-align: middle;
}
.zdenglu {
  margin-left: 1.5rem;
  width: 60%;
  height: 1rem;
  color: #000;
  border-radius: 0.2rem;
  background: rgb(235, 231, 170);
  text-align: center;
  line-height: 1rem;
  font-size: 0.3rem;
}
</style>
<script>
export default {
  data() {
    return {
      value: "",
      value1: "",
      zhanghao: false,
      mima: false,
      checked: false,
      n: 0,
      m: 4,
      bool: false,
    };
  },
  methods: {
    /* 账号判断 */
    sjh() {
      console.log("in");
      var reg = /^1[3456789]\d{9}$/;
      if (reg.test(this.value)) {
        this.zhanghao = true;
      } else {
        this.zhanghao = false;
      }
    },
    /* 密码判断 */
    mimapan() {
      var reg = /^[\w]{6,16}$/;
      if (reg.test(this.value1)) {
        this.mima = true;
      }
    },
    /* 选择判断 */
    add() {
      this.n++;
      if (this.n % 2 == 1) {
        this.checked = true;
      }
      else{
        this.checked = false;
      }
    },
    /* 登录判断 */
    denglu() {
      if (this.zhanghao == true && this.mima == true && this.checked == true) {
        this.$store.commit("zhanghao", this.value);
        this.$store.commit("mima", this.value1);
        this.$router.push({ path: "/shouye" });
      } else {
        var set = setInterval(() => {
          this.m--;
          console.log(this.m);
          if (this.m == 1||this.m==2||this.m==3) {
            this.bool = true;
          } else {
            this.bool = false;
          }
        }, 1000);
        setTimeout(() => {
            clearTimeout(set)
        }, 5000);
      }
    },
  },
};
</script>
